<template>
	<view class="content">
		
		<view class="title">
			<image src="/static/index/camera.png" class="img-title"></image>
			<span class="titletext">照片墙</span>
		</view>
		
		<view class="pictureList img1" v-for="(item,index) in pictureList">
			<view>
				<image style="width: 100%;" :src="item.pictureUrl" class="img"></image>
			</view>
			<view class="suo-ys">
				<view class="suo style1">
					<image src="../../static/me/套餐-锁小.png" class="img-suo" ></image>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"><view-tabbar :current="0"> </view-tabbar></view>
		
	</view>
</template>


<script>

	import tab from "@/components/teacher-tabbar/teacher-tabbar.vue"
	export default {
		
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},

		data() {
			return {
				pictureList:[], //学生照片列表

				classId: null, //老师对应的班级列表 的 班级id
				
				studentList: [], //学生列表
				studentId: null, //学生id
				teacherId: null, //老师id
			}
		},

		components:{
			'view-tabbar': tab
		},

		mounted() {
			this.getClassId(this.teacherId)
		},
		
		onLoad: function (options) {
			this.teacherId = uni.getStorageSync("teacherId")
			
			//下拉刷新
			setTimeout(function () {
				
			}, 1000);
			uni.startPullDownRefresh();
			
		},
		//停止下拉刷新
		onPullDownRefresh() {
			setTimeout(function () {
				uni.stopPullDownRefresh();
				
			}, 1000);
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},
		
		methods: {
			//获取老师对应的班级id
			getClassId(teacherId){
				uni.$api.findClassListByTeacherId(teacherId).then(result => {
					this.classId = result[0].id
					this.getStudentId(this.classId)
				})
				
			},
			getStudentId(classId){
				//根据班级id获取学生列表 
				uni.$api.appStudentFindByClassId(classId).then(result => {
					this.studentId = result[0].id //给studentid赋值
					this.getPictureList(this.studentId)
				})
			},
			//获取照片列表
			getPictureList(studentId){
				uni.$api.appPictureFindByStudentId(studentId).then(result =>{
					this.pictureList = result
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.img-title{
		width: 30px;
		height: 30px;
		display: inline-block;
		vertical-align: middle;
		//padding-top: 30px;
	}
	.suo-ys{
		width: 45rpx;
		height: 20rpx;
	}
	.title{
		text-align: center;
	}
	.titletext{
		display: inline-block;
		line-height: 50px;
		padding-left: 10px;
		vertical-align: middle;
		color: #e3bb41;
		font-size: 20px;
		font-weight: bold;
	}
	.suo{
		width: 45rpx;
		height: 45rpx;
		position:relative;
		top:-200rpx;
		left: 25rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		padding-left: 8rpx;
	}
	.style1{
		display: block;
	}
	.style2{
		display: none;
	}
	.pictureList{
		width: 45%;
		display: inline-block;
		position: relative;
		margin-left: 25rpx;
		margin-top: 0rpx;
	}
	.img1{
		display: inline-block;
		
	}
	.img2{
		display: none;
	}
	.img{
		/* widthFixs: 100%; */
		height: 210rpx;
		border-radius: 20rpx;
	}
	.img-suo{
		width: 30rpx;
		height: 30rpx;
	}

</style>

